.index {
    min-height: 100vh;
    width: 100vw;
    background-color: #f8f8f9;
}

.guide {
    .number {
        font-size: 60px;
        min-height: 300px;
    }
}

.border {
    margin: 20px;
    padding: 20px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    border-radius: 8px;
    background-color: #ffffff;
    .max-height {
        height: 100%;
    }
    .image-empty {
        padding: 30px;
        height: calc(256px / 2);
        width: calc(478px / 2);
    }
    .text-empty {
        color: #bbbec4;
    }
    &.hover {
        opacity: 0.8;
        background-color: rgb(226, 229, 235);
    }
    .image {
        width: 128px;
        height: 128px;
    }
}

.loading {
    height: 360px;
}
.device-list-info {
    font-size: 24px;
    color: #1c2438;
    .key {
        text-align: right;
    }
    .value {
        text-align: left;
        color: #495060;
    }
    &.explain {
        .value {
            color: #80848f;
        }
    }
}
.deviceMode {
    .at-icon {
        color: #bbbec4;
    }
}

.mag-top {
    &.speed {
        align-items: center;
        .title {
            font-size: 26px;
            color: #1c2438;
        }
        .tisp {
            font-size: 20px;
            color: #80848f;
        }
    }
    &:first-child {
        margin-top: 15px;
    }
    margin-top: 30px;
}

.pad {
    padding: 15px 0;
}

.ledtext-col {
    color: #1c2438;
    font-size: 36px;
    font-weight: 700;
    .ledtext-title {
        padding-left: 15px;
        display: inline-block;
    }
}

.ledtext-logs {
    color: #80848f;
    padding: 8px 0;
    .time {
        font-size: 22px;
        color: #bbbec4;
    }
}
